<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" th:href="@{css/me.css}">
    <link rel="stylesheet" th:href="@{css/animate.compat.css}">

</head>
<body>
    <!-- 导航 -->
    <nav th:replace="_fragments :: menu(1)" class=" ui secondary attached m-opacity-mid segment m-mini m-shadow animated fadeInDown">


    </nav>


    <!-- 中间内容 -->
    <main class="m-large m-container animated fadeInUpBig ">
        <div class="ui container">

        
        <div class="ui grid  stackable">


            <!-- 左边布局 -->
            <div class="eleven wide column">

                <!-- 头部 -->
                <div class="ui  top attached segment">
                    <div class="ui middle aligned two column stackable grid">
                        <div class="column">
                            <h2 class="ui blue header">新闻</h2>
                        </div>
                        <div class="right aligned column ">
                            共 <h2 class="ui red header m-inline-block" th:text="${page.totalElements}"> 20</h2>篇
                        </div>
                    </div>

                </div>


                <!-- 内容 -->

                <div class="ui attached m-container segment ">
                    <div class="ui padded vertical m-large segment" th:each="news : ${page.content}">
                        <div class="ui mobile reversed grid" >
                            <div class=" eleven wide column">
                                <h3 class="ui header">
                                    <a href="" class="m-black" th:href="@{/news/{id}(id=${news.id})}" th:text="${news.title}" target="_blank">撒旦发射点发射点发生</a>

                                </h3>
                                <p class="m-line" th:text="|${news.description}.....|">
                                    在制作html页面中，经常需要使用css来改变图片的大小来实现想要的效果，css改变图片大小有几种方法。下
                                    面小编举例讲解CSS怎么改变图片的大小。组件存储库在NPM上发布，并在GitHub上作为标记发布。
                                    检查下面的可用回购清单 语义组织 在GitHub上
                                    每个组件的发行说明将自动与主要发行版中该组件的相关说明一起更新。
                                </p>
                                <div class="ui grid">
                                    <div class="eleven wide column ">
                                        <div class="ui mini horizontal link list ">
                                                <div class="item">
                                                <img src="/static/images/cg1.png" alt="" th:src="@{${news.user.avatar}}" class="ui avatar image img-tiny">
                                                <div class="content">
                                                    <a href="" class=" header" th:text="${news.user.nickname}">大鸡巴</a>
                                                </div>
                                                </div>
                                                <div class="item ">
                                                    <i class="calendar icon"></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2020-8-9</span>
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i><span th:text="${news.views}"></span>
                                                </div>
                                            
                                        </div>  
                                        

                                    </div>
                                        <div class="right aligned five wide column">
                                            <a href="" target="_blank" class="ui label basic red" th:text="${news.type.name}">热点新闻</a>
                                        </div>
                                </div>

                            </div>
                            <div class="five wide column">
                                <a href="" th:href="@{/news/{id}(id=${news.id})}" target="_blank">
                                    <img src="../static/images/cg1.png" alt="" th:src="@{${news.firstPicture}}" class="ui rounded image img-style">
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--/*-->
                    <div class="ui padded vertical m-large segment">
                        <div class="ui mobile reversed grid">
                            <div class=" eleven wide column">
                                <h3 class="ui header">
                                        撒旦发射点发射点发生
                                </h3>
                                <p class="m-line">
                                    在制作html页面中，经常需要使用css来改变图片的大小来实现想要的效果，css改变图片大小有几种方法。下
                                    面小编举例讲解CSS怎么改变图片的大小。组件存储库在NPM上发布，并在GitHub上作为标记发布。
                                    检查下面的可用回购清单 语义组织 在GitHub上
                                    每个组件的发行说明将自动与主要发行版中该组件的相关说明一起更新。
                                </p>
                                <div class="ui grid">
                                    <div class="eleven wide column ">
                                        <div class="ui mini horizontal link list ">
                                                <div class="item">
                                                <img src="/static/images/cg1.png" alt="" class="ui avatar image img-tiny">
                                                <div class="content">
                                                    <a href="" class=" header">大鸡巴</a>
                                                </div>
                                                </div>
                                                <div class="item ">
                                                    <i class="calendar icon"></i>2020-8-9
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>2123
                                                </div>
                                            
                                        </div>  
                                        

                                    </div>
                                        <div class="right aligned five wide column">
                                            <a href="" target="_blank" class="ui label basic red">热点新闻</a>
                                        </div>
                                </div>

                            </div>
                            <div class="five wide column">
                                <a href="" target="_blank">
                                    <img src="../static/images/cg1.png" alt="" class="ui rounded image img-style">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui padded vertical m-large segment">
                        <div class="ui mobile reversed grid">
                            <div class=" eleven wide column">
                                <h3 class="ui header">
                                        撒旦发射点发射点发生
                                </h3>
                                <p class="m-line">
                                    在制作html页面中，经常需要使用css来改变图片的大小来实现想要的效果，css改变图片大小有几种方法。下
                                    面小编举例讲解CSS怎么改变图片的大小。组件存储库在NPM上发布，并在GitHub上作为标记发布。
                                    检查下面的可用回购清单 语义组织 在GitHub上
                                    每个组件的发行说明将自动与主要发行版中该组件的相关说明一起更新。
                                </p>
                                <div class="ui grid">
                                    <div class="eleven wide column ">
                                        <div class="ui mini horizontal link list ">
                                                <div class="item">
                                                <img src="../static/images/cg1.png" alt="" class="ui avatar image img-tiny">
                                                <div class="content">
                                                    <a href="" class=" header">大鸡巴</a>
                                                </div>
                                                </div>
                                                <div class="item ">
                                                    <i class="calendar icon"></i>2020-8-9
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>2123
                                                </div>
                                            
                                        </div>  
                                        

                                    </div>
                                        <div class="right aligned five wide column">
                                            <a href="" target="_blank" class="ui label basic red">热点新闻</a>
                                        </div>
                                </div>

                            </div>
                            <div class="five wide column">
                                <a href="" target="_blank">
                                    <img src="../static/images/cg1.png" alt="" class="ui rounded image img-style">
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--*/-->
                    
                </div>

                <!-- 底部 -->
                <div class="ui bottom attached segment">
                    <div class="ui middle aligned two column grid" th:if="${page.totalPages}>1">
                        <div class="column">
                            <a href="" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}" class=" ui teal button">上一页</a>
                        </div>
                        <div class="right aligned column ">
                            <a href="" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}" class=" ui teal button">下一页</a>
                        </div>
                    </div>
                </div>

            </div>


            <!-- 右边布局top -->
            <div class="five wide column">

                <!-- 分类 -->
                <div class="ui  segments">
                     <div class="ui secondary segment">
                         <div class="ui two column grid">
                             <div class="column">
                                <i class="idea icon"></i>
                                分类
                             </div>
                             <div class="right aligned column">
                                <a href="" th:href="@{/types/-1}">more
                                    <i class="angle right icon"></i>
                                </a>
                             </div>
                         </div>
                     </div>
                     <div class="ui blue segment">
                            <div class="ui fluid vertical menu">
                                <a href="" class="item"  th:href="@{/types/{id}(id=${type.id})}" th:each="type : ${types}">
                                    <span th:text="${type.name}">国际新闻</span>
                                    <div class="ui label blue tag" th:text="${#arrays.length(type.news)}">12</div>
                                </a>

                            </div>
                         <!--/*-->
                            <div class="ui fluid vertical menu">
                                <a href="" class="item">
                                    国际新闻
                                    <div class="ui label blue tag">12</div>
                                </a>

                            </div>
                            <div class="ui fluid vertical menu">
                                <a href="" class="item">
                                    国际新闻
                                    <div class="ui label blue tag">12</div>
                                </a>

                            </div>
                            <div class="ui fluid vertical menu">
                                <a href="" class="item">
                                    国际新闻
                                    <div class="ui label blue tag">12</div>
                                </a>

                            </div>
                            <div class="ui fluid vertical menu">
                                <a href="" class="item">
                                    国际新闻
                                    <div class="ui label blue tag">12</div>
                                </a>

                            </div>
                            <div class="ui fluid vertical menu">
                                <a href="" class="item">
                                    国际新闻
                                    <div class="ui label blue tag">12</div>
                                </a>

                            </div>
                         <!--*/-->
                     </div>
                </div>

                <!-- 标签 -->
                <div class="ui  segments m-top-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                               <i class="tags icon"></i>
                               标签
                            </div>
                            <div class="right aligned column">
                               <a href="" th:href="@{/tags/-1}">more
                                   <i class="angle right icon"></i>
                               </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui blue segment">
                        <a href="" target="_blank"   th:each="tag : ${tags}" class="m-margin-tiny ui blue tag label" th:href="@{/tags/{id}(id=${tag.id})}">

                            <span th:text="${tag.name}">66</span>
                            <div class="detail" th:text="${#arrays.length(tag.news)}">
                                10
                            </div>
                        </a>
                        <!--/*-->
                        <a href="" target="_blank"  class="m-margin-tiny ui blue tag label">精选
                            <div class="detail">
                                10
                            </div>
                        </a>
                        <a href="" target="_blank"  class="m-margin-tiny ui blue tag label">精选
                            <div class="detail">
                                10
                            </div>
                        </a>
                        <a href="" target="_blank"  class="m-margin-tiny ui blue tag label">精选
                            <div class="detail">
                                10
                            </div>
                        </a>
                        <a href="" target="_blank"  class="m-margin-tiny ui blue tag label">精选
                            <div class="detail">
                                10
                            </div>
                        </a>
                        <a href="" target="_blank"  class="m-margin-tiny ui blue tag label">精选
                            <div class="detail">
                                10
                            </div>
                        </a>
                        <!--*/-->
                    </div>
                    
               </div>


                <!-- 推荐 -->
                <div class="ui segments m-top-large">
                    <div class="ui secondary segment ">
                        <div class="ui two column grid">             
                            <div class="column">
                               <i class="thumbtack icon"></i>
                               最新推荐
                            </div>
                        
                        </div>
                    </div>
                    <div class="ui blue segment" th:each="news : ${newsrecommend}">
                        <a href="" target="_blank"  th:href="@{/news/{id}(id=${news.id})}" class="m-black" th:text="${news.title}">国际故事</a>
                    </div>
                    <!--/*-->
                    <div class="ui blue segment">
                        <a href="" target="_blank" class="m-black">国际故事</a>
                    </div>
                    <div class="ui blue segment">
                        <a href="" target="_blank" class="m-black">国际故事</a>
                    </div>
                    <!--*/-->
                </div>

            </div>

        </div>

        </div>



    </main>
    

    <!-- 底部 -->
    <footer th:replace="_fragments :: footer" class="ui secondary m-opacity-mid vertical segment m-massive m-shadow">

    </footer>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->

    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <!--/*/</th:block>/*/-->
    <script>
        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');

        });
    </script>

   

</body>
</html>